<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column prop="_id" label="ID" width="300"></el-table-column>
      <el-table-column prop="parent.name" label="上级分类"></el-table-column>
      <el-table-column prop="name" label="分类名称"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            @click="$router.push(`/categories/edit/${scope.row._id}`)"
            type="text"
            size="small"
          >编辑</el-button>
          <el-button @click="removeHandle(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div align="right" style="margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await this.$http.get("rest/categories", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      });
      this.tableData = res.data;
    },
    async removeHandle(row) {
      const confirmRes = await this.$confirm(
        `您确认要删除id[${row.name}]的分类?`,
        "提示",
        {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);

      if (confirmRes === "confirm") {
        const res = await this.$http.delete(`rest/categories/${row._id}`);
        this.$message({
          type: "success",
          message: "删除成功"
        });
        this.getList();
      } else {
        this.$message({
          type: "info",
          message: "取消了删除"
        });
      }
    },
    handleSizeChange(val){
      this.pageSize = val
      this.pageNum = 1
      this.getList()
    },
    handleCurrentChange(val){
      this.pageNum = val
      this.getList()
    }
  }
};
</script>

<style>
</style>